<template>

    <el-select v-model="state.selected" class="m-2" placeholder="Select" 
    @change="change"
    size="large">
        <el-option v-for="item in state.dates" :key="item" :label="item" :value="item" />
    </el-select>
    <el-text> 数量：{{ state.data.length }} </el-text>

    <copy-stocks-to-clipboard :data="state.data" />

    <el-table :data="state.data" height="900"
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    @cell-click="cellClick"
    style="width: 100%">

        <el-table-column prop="date" label="日期" width="120" sortable/>
        <el-table-column prop="day" label="星期" width="80">
            <template #default="scope">
                {{ getDayOfWeek(scope.row.date) }}
            </template> 
        </el-table-column>
        <el-table-column prop="stock" label="股票" width="150">
            <template #default="scope">
                <ToStockDetail :stock="scope.row.stock" />
            </template> 
        </el-table-column>
        <el-table-column prop="display" label="display">
            <template #default="scope">
                <ToDDisplay :stock="scope.row.stock" :date="scope.row.date" />
            </template>
        </el-table-column>
        <el-table-column prop="industry" label="industry" width="160"/>
        <el-table-column prop="close" label="close" sortable/>
        <el-table-column prop="pct" label="pct" sortable/>
        <el-table-column prop="nextPct" label="nextPct" sortable/>
        <el-table-column prop="nextHighPct" label="nextHighPct" sortable/>
        <el-table-column prop="lp" label="lp" sortable/>
        <el-table-column prop="gt20d" label="gt20d" sortable width="100"/>
        <el-table-column prop="gt30d" label="gt30d" sortable width="100"/>
        <el-table-column prop="gt60d" label="gt60d" sortable width="100"/>
        <el-table-column prop="gt300d" label="gt300d" sortable width="100"/>

    </el-table>

</template>

<script setup>
// 个股周数据详情页
import { reactive } from 'vue';
import { getTradingRankGt5 } from '../../service/tradingRank';
import ToStockDetail from '../ToStockDetail.vue';
import { getLpClassName,getDayOfWeek } from '../../utils/help';
import CopyStocksToClipboard from '../CopyStocksToClipboard.vue';
import ToDDisplay from '../element/ToDDisplay.vue';

document.title = "GT5"

const baseKey = "tradingRankGt5"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

const state = reactive({
    rawData: [],
    data: [],
    dates: "",
    selected: "",
    operationSelected: "",
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})

        const loadData = () => {
            getTradingRankGt5(state.selected).then(res => {
                state.rawData = res.data.data
                state.data = state.rawData

                state.dates = res.data.date
            })
        }

        loadData()

        const change = () => {
            loadData()
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if (columnProperty == "lp") {
                return getLpClassName(row[columnProperty])
            }
            if (["nextPct","nextHighPct"].includes(columnProperty)) {
                if (row[columnProperty] < 0) {
                    return 'lt0-cell'
                }             
            }

            if (["gt60d","gt300d", "gt30d","gt20d","lowGt20d","lowGt30d"].includes(columnProperty)) {
                if (row[columnProperty] >= 0) {
                    return 'd300up-cell'
                } else {
                    return 'd300down-cell'
                }
            }
            return ''
        }

        const cellClick = (row, column, cell, event) => {
            var columnProperty = column.property

            if (['industry','nextPct',"gt300d"].includes(columnProperty)) {
                let val = row[columnProperty]
                if (state.operationSelected != "" && state.operationSelected == val) {
                    state.operationSelected = ""
                    state.data = state.rawData
                } else {
                    state.operationSelected = val
                    if (["nextPct"].includes(columnProperty)) {
                        if (val >= 0) {
                            state.data = state.rawData.filter(item => item[columnProperty] >= 0)
                        } else {
                            state.data = state.rawData.filter(item => item[columnProperty] < 0)
                        }
                    } else {
                        state.data = state.rawData.filter(item => item[columnProperty] == val)
                    }
                }
            }
        }
</script>